<template>
  <div>
    <el-breadcrumb style="margin-top: 10px; margin-bottom: 20px; margin-left: 25px;">
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>收藏夹</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片区域-->
    <el-card>
      <!--搜索与添加区域-->
      <el-row :gutter="20">
        <!--搜索框-->
        <el-col :span="7" style="margin-bottom: 20px;">
          <el-input v-model="selectBy" placeholder="请输入标题进行查询" clearable @clear="clearSelect">
            <el-button slot="append" icon="el-icon-search" @click="selectByfavorName(selectBy)"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!--用户列表区域-->
      <el-table :data="beforefavorList.slice((pagenum-1)*pagesize,pagenum*pagesize)" :border="true" stripe>
        <el-table-column type="index"></el-table-column>
        <!-- <el-table-column label="类别" prop="refType">知识</el-table-column> -->
        <el-table-column label="标题" prop="knowledge.title"></el-table-column>
        <el-table-column label="著作人" prop="knowledge.updatePerson"></el-table-column>
        <el-table-column label="操作" width="211px">
          <template slot-scope="scope">
            <!--修改按钮-->
            <el-button type="primary" icon="el-icon-edit" size="mini"
              @click="getKnowledgeByrow(scope.row)">查看</el-button>
            <!--删除按钮-->
            <el-button type="danger" icon="el-icon-delete" size="mini"
              @click.native.prevent="cancelFavorite(scope.row)">取消收藏</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog v-model="dataSon" :title=dataSon.title :visible.sync="dialogFormVisible" style="text-align: center">
        <div style="text-align: left">
          <span>{{dataSon.content}}</span>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: left">
          <span>著作人：{{dataSon.updatePerson}}</span>
          <span style="margin-left: 15px;">发布时间：{{dataSon.uploadTime}}</span>
          <span style="margin-left: 15px;">修改时间：{{dataSon.updateTime}}</span>
        </div>
      </el-dialog>

      <!--分页区域-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
        :page-sizes="[1,2,5,10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"
        style="text-align: center; margin-top: 10px;">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
  import { GetFavorAPI } from '@/components/utils/api/read_api.js'
  import { GetKnowledgeInfoListAPI } from '@/components/utils/api/knowledge_api.js'
  import { PostReadAPI,RemoveReadAPI} from '@/components/utils/api/read_api.js'
  export default {
    data() {
      return {
        middlefavorList:[],
        dialogFormVisible: false,
        dataSon: [],
        selectBy: '',
        beforefavorList: [],
        favorList: [],
        total: 0,
        pagesize: 10,
        pagenum: 1,
      }
    },
    created() {
      this.getFavorList()
    },
    methods: {

      // 清空搜索
      clearSelect(){
        this.beforefavorList = []
        this.getFavorList()
      },

      // 取消收藏
      cancelFavorite(information) {
        var params = {
          id: information.id,
        }
        RemoveReadAPI(params).then(res => {
          if (res.data.code == 500) {
            this.$message.error("操作失败");
          }
          else if (res.data.code == 200) {
            // window.location.reload()
            this.$message.success("取消收藏成功");
            this.getFavorList()
          }
        })
      },

      // 获取当前行的知识
      getKnowledgeByrow(information) {
        this.dialogFormVisible = true
        this.dataSon = information.knowledge
      },

      // 初始化收藏夹
       getFavorList() {
        var params = {
          operation: 2,
          readPersonId: sessionStorage.getItem("userId")
        }
        GetFavorAPI(params).then(res => {
          console.log("file: Favorites.vue:112  res", res)
          this.beforefavorList = res.data.data.list
        })
      },

      // 模糊查询
      selectByfavorName(name){
        var params = {
          operation: 2,
          readPersonId: sessionStorage.getItem("userId"),
          title: name
        }
        GetFavorAPI(params).then(res => {
          console.log("file: Favorites.vue:112  res", res)
          this.beforefavorList = res.data.data.list
        })
      },
      //监听pagesize改变的事件
      handleSizeChange(newSize) {
        this.pagesize = newSize
      },

      //监听页码值改变的事件
      handleCurrentChange(newPage) {
        this.pagenum = newPage
      },

    }
  }
</script>